
<template>
  <div class="el-custom-from" style="position: relative">
    <el-tabs v-model="activeName" class="node-tabs-kts" v-loading="loading">
      <el-tab-pane name="property">
        <template #label>
          <div>
            <span class="font_16px font_Title">
              <i class="el-icon-lx-servicefill"></i>
              {{ this.$t("i18n.path_flow_center") }}
            </span>
          </div>
        </template>
        <div id="From_div_style" :style="autoHeight">
          <el-container>
            <el-main id="el-custom-form-main">
              <div class="flowproperty-container container" :style="contentHeight">
                <el-scrollbar>
                  <div
                    class="flow-workbench-icon-div"
                    v-for="(element, index) in flowBenchs"
                    :key="index"
                  >
                    <el-tooltip placement="right-start" effect="light">
                      <template #content>
                        <el-tag
                          effect="dark"
                          size="mini"
                          style="margin-left: 5px; margin-top: 5px;"
                        >
                          {{ $t("flowi18n.flow_property_name") }}：
                          {{
                          element.cnName
                          }}
                        </el-tag>
                        <br />
                        <el-tag
                          effect="dark"
                          size="mini"
                          style="margin-left: 5px; margin-top: 5px;"
                        >
                          {{ $t("flowi18n.flow_property_flowenname") }}：
                          {{
                          element.enName
                          }}
                        </el-tag>
                        <br />
                        <el-tag
                          effect="dark"
                          size="mini"
                          style="margin-left: 5px; margin-top: 5px;"
                        >
                          {{ $t("flowi18n.flow_step_property_placeholder") }}：
                          {{
                          element.placeholder
                          }}
                        </el-tag>
                      </template>
                      <el-button
                        type="primary"
                        :style="{'background':element.flowStyle,'border-color':element.flowStyle}"
                        @click="processEvent(element)"
                      >
                        <svg
                          class="flow-workbench-icon"
                          aria-hidden="true"
                          @click="element.selected=!element.selected"
                        >
                          <use :xlink:href="element.flowIcon" />
                        </svg>
                        <div
                          class="flow-workbench-icon-checked-text"
                        >{{$i18n.locale === "zh-cn" ?element.cnName:element.enName}}</div>
                      </el-button>
                    </el-tooltip>
                  </div>
                </el-scrollbar>
              </div>
            </el-main>
          </el-container>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="position: absolute;right:30px;top:10px;">
      <el-button
        class="el-field-title-close"
        @click="sortEvent"
        size="mini"
        type="text"
        icon="el-icon-setting"
      >{{$t('i18n.flow_center_sort_setting')}}</el-button>
    </div>
  </div>
</template>
<script>
let windowHeight = parseInt(window.innerHeight);
import reqVue from "../../utils/req.vue";
import confVue from "../../utils/conf.vue";
export default {
  data() {
    return {
      contentHeight: {
        height: ""
      },
      autoHeight: {
        height: "",
        width: "97%",
        margin: "11px",
        float: "left"
      },
      activeName: "property",
      flowBenchs: [],
      loading: true,
      apipath: "flowcenter",
      way: confVue.$flowApi
    };
  },
  methods: {
    ///设置窗台的高度
    getHeight() {
      this.autoHeight.height = windowHeight - 60 + "px";
      this.contentHeight.height = windowHeight - 140 + "px";
      this.initWorkBench();
    },
    initWorkBench() {
      reqVue.$Post(null, this.apipath + "/v1.0/flows", this.way).then(
        function(data) {
          if (data.status) {
            if (data.body !== "") this.flowBenchs = data.body;
            this.loading = false;
          } else {
            this.$message.error(data.message);
            this.loading = false;
          }
        }.bind(this)
      );
    },
    sortEvent() {
      this.$emit("SortEvent");
    },
    ///跳转到流程页面
    processEvent(procee) {
      this.$router.push({
        path: "/process",
        query: {
          flowId: procee.flowId,
          flowVersionId: procee.flowVersionId,
          formId: procee.formId,
          formVersionId: procee.formVersionId,
          taskId: 0,
          callType: "mayapply",
          approvalType: 0
        }
      });
    }
  },
  mounted() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  components: {}
};
</script>